<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>

  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>

<div id="map"></div>
<canvas id="canvas"></canvas>

<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=baiduKey"></script>
<script type="text/javascript" src="../../js/mapv.js"></script>

<script type="text/javascript">

  // 百度地图API功能
  var map = new BMap.Map("map", {
    enableMapClick: false
  });    // 创建Map实例
  map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5);  // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

  map.setMapStyle({
    styleJson: [{
      "featureType": "water",
      "elementType": "all",
      "stylers": {
        "color": "#031628"
      }
    }, {
      "featureType": "land",
      "elementType": "geometry",
      "stylers": {
        "color": "#000102"
      }
    }, {
      "featureType": "highway",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#000000"
      }
    }, {
      "featureType": "highway",
      "elementType": "geometry.stroke",
      "stylers": {
        "color": "#147a92"
      }
    }, {
      "featureType": "arterial",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#000000"
      }
    }, {
      "featureType": "arterial",
      "elementType": "geometry.stroke",
      "stylers": {
        "color": "#0b3d51"
      }
    }, {
      "featureType": "local",
      "elementType": "geometry",
      "stylers": {
        "color": "#000000"
      }
    }, {
      "featureType": "railway",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#000000"
      }
    }, {
      "featureType": "railway",
      "elementType": "geometry.stroke",
      "stylers": {
        "color": "#08304b"
      }
    }, {
      "featureType": "subway",
      "elementType": "geometry",
      "stylers": {
        "lightness": -70
      }
    }, {
      "featureType": "building",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#000000"
      }
    }, {
      "featureType": "all",
      "elementType": "labels.text.fill",
      "stylers": {
        "color": "#857f7f"
      }
    }, {
      "featureType": "all",
      "elementType": "labels.text.stroke",
      "stylers": {
        "color": "#000000"
      }
    }, {
      "featureType": "building",
      "elementType": "geometry",
      "stylers": {
        "color": "#022338"
      }
    }, {
      "featureType": "green",
      "elementType": "geometry",
      "stylers": {
        "color": "#062032"
      }
    }, {
      "featureType": "boundary",
      "elementType": "all",
      "stylers": {
        "color": "#465b6c"
      }
    }, {
      "featureType": "manmade",
      "elementType": "all",
      "stylers": {
        "color": "#022338"
      }
    }, {
      "featureType": "label",
      "elementType": "all",
      "stylers": {
        "color": "#022338",
        "visibility": "off"
      }
    }]
  });

  $.get('../../data/china.json', function(geojson) {

    var geojsonOptions = {
      gradient: {
        0: 'rgba(55, 50, 250, 0.4)',
        1: 'rgba(55, 50, 250, 1)'
      },
      max: 354551,
      draw: 'intensity'
    }

    var geojsonDataSet = mapv.geojson.getDataSet(geojson);

    var to = '北京';

    var qianxi = new mapv.DataSet([
      {
        from: '河北',
        count: 354551,
        to: to,
      },
      {
        from: '天津',
        count: 97323,
        to: to,
      },
      {
        from: '山东',
        count: 28664,
        to: to,
      },
      {
        from: '山西',
        count: 16650,
        to: to,
      },
      {
        from: '辽宁',
        count: 14379,
        to: to,
      },
      {
        from: '河南',
        count: 10980,
        to: to,
      },
      {
        from: '内蒙古自治区',
        count: 9603,
        to: to,
      },
      {
        from: '江苏',
        count: 4536,
        to: to,
      },
      {
        from: '上海',
        count: 3556,
        to: to,
      },
      {
        from: '广东',
        count: 2600,
        to: to,
      },
    ]);

    var qianxiData = qianxi.get();

    var lineData = [];
    var pointData = [];
    var textData = [];
    var timeData = [];

    var citys = {}

    for (var i = 0; i < qianxiData.length; i++) {
      var fromCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].from);
      var toCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].to);
      if (!fromCenter || !toCenter) {
        continue;
      }
      citys[qianxiData[i].from] = qianxiData[i].count;
      citys[qianxiData[i].to] = 100;
      pointData.push(
        {
          geometry: {
            type: 'Point',
            coordinates: [fromCenter.lng, fromCenter.lat]
          }
        }
      );
      pointData.push(
        {
          geometry: {
            type: 'Point',
            coordinates: [toCenter.lng, toCenter.lat]
          }
        }
      );
      textData.push(
        {
          geometry: {
            type: 'Point',
            coordinates: [fromCenter.lng, fromCenter.lat]
          },
          text: qianxiData[i].from
        }
      );
      textData.push(
        {
          geometry: {
            type: 'Point',
            coordinates: [toCenter.lng, toCenter.lat]
          },
          text: qianxiData[i].to
        }
      );

      var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]);

      for (j = 0; j < curve.length; j++) {
        timeData.push({
          geometry: {
            type: 'Point',
            coordinates: curve[j]
          },
          count: 1,
          time: j
        });
      }

      lineData.push({
        geometry: {
          type: 'LineString',
          coordinates: curve
          //coordinates: [[fromCenter.lng, fromCenter.lat], [toCenter.lng, toCenter.lat]]
        },
        count: 30 * Math.random()
      });

    }

    var data = geojsonDataSet.get({
      filter: function (item) {

        if (!citys[item.name]) {
          return false;
        }

        item.count = citys[item.name];
        return true;
      }
    });
    geojsonDataSet = new mapv.DataSet(data);

    var mapvLayer = new mapv.baiduMapLayer(map, geojsonDataSet, geojsonOptions);

    var textDataSet = new mapv.DataSet(textData);

    var textOptions = {
      draw: 'text',
      font: '14px Arial',
      fillStyle: 'white',
      shadowColor: 'yellow',
      shadowBlue: 10,
      zIndex: 11,
      shadowBlur: 10
    }

    var textMapvLayer = new mapv.baiduMapLayer(map, textDataSet, textOptions);

    var lineDataSet = new mapv.DataSet(lineData);

    var lineOptions = {
      strokeStyle: 'rgba(255, 250, 50, 0.8)',
      shadowColor: 'rgba(255, 250, 50, 1)',
      shadowBlur: 20,
      lineWidth: 2,
      zIndex: 100,
      draw: 'simple'
    }

    var lineLayer = new mapv.baiduMapLayer(map, lineDataSet, lineOptions);

    var pointOptions = {
      fillStyle: 'rgba(254,175,3,0.7)',
      shadowColor: 'rgba(55, 50, 250, 0.5)',
      shadowBlur: 10,
      size: 5,
      zIndex: 10,
      draw: 'simple'
    }


    var pointDataSet = new mapv.DataSet(pointData);

    var pointLayer = new mapv.baiduMapLayer(map, pointDataSet, pointOptions);


    var timeDataSet = new mapv.DataSet(timeData);

    console.log(timeData);

    var timeOptions = {
      fillStyle: 'rgba(255, 250, 250, 0.5)',
      zIndex: 200,
      size: 2.5,
      animation: {
        type: 'time',
        stepsRange: {
          start: 0,
          end: 50
        },
        trails: 10,
        duration: 2,
      },
      draw: 'simple'
    }

    var timeMapvLayer = new mapv.baiduMapLayer(map, timeDataSet, timeOptions);

  });




</script>

</body>
</html>
